<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/art-template.js"></script>
    <script src="./jquery.js"></script>
    <style>
      table {
        width: 600px;
        margin: 100px auto;
        border-collapse: collapse;
        text-align: center;
      }

      td {
        width: 100px;
        border: 1px solid #333;
        height: 50px;
        line-height: 50px;
        background-color: skyblue;
      }
      th {
        width: 100px;
        border: 1px solid #333;
        height: 30px;
        line-height: 30px;
        background-color: rgb(0, 255, 76);
      }

      thead tr {
        height: 80px;
        background-color: #ccc;
      }
    </style>
  </head>

  <body>
    <table cellspacing="0">
      <thead>
        <tr>
          <th>ID</th>
          <th>书名</th>
          <th>作者</th>
          <th>朗读者</th>
          <th>详情</th>
          <th>类型</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <script id="model1" type="text/html">
      {{each name as obj}}
      <tr>
        <td>{{obj.id}}</td>
        <td>{{obj.title}}</td>
        <td>{{obj.author}}</td>
        <td>{{obj.podcast}}</td>
        <td><a href="./idnex2.html?id={{obj.id}}">详情</a></td>
        <td>{{obj.type_id}}</td>
      </tr>
      {{/each}}
    </script>

    <script>
      // var fun = function () {
        $.get("tab.php", function (res) {
          var data1 = JSON.parse(res);
          // console.log(obj);
          var data = { name: data1 };
          var obj = template("model1", data);
          // console.log(obj);
          document.querySelector("tbody").innerHTML = obj;
        });
      // };
      // fun();
    </script>
  </body>
</html>
